<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bigTable-Test</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/jquery.extGrid.debug.js"></script>
<script type="text/javascript" src="js/jquery.extGrid.debug.edit.js"></script>
<script src="bootstrap/js/bootstrap.min.js"	type="text/javascript"></script>

<link rel="stylesheet" type="text/css"	href="bootstrap/css/bootstrap.css" />
<link href="css/grid.debug.css" rel="stylesheet" type="text/css" />   
<link href="css/edit.css" rel="stylesheet" type="text/css" />   


</head>
<body>
	
	
<ul class="nav nav-tabs" id="myTab">
		<li><a href="#home">Home</a></li>
		<li  class="active"><a href="#profile">Profile</a></li>
		<li><a href="#messages">Messages</a></li>
		<li><a href="#settings">Settings</a></li>
		<li><a href="#settings2">Settings</a></li>
	</ul>

	<div class="tab-content">
		<div class="tab-pane active" id="home">
			  <div style=" width:600px; height:300px;" class="grid1"></div>
		</div>
		<div class="tab-pane active" id="profile">
		    <div style=" width:600px; height:300px;" class="grid2"></div>	
		</div>
		<div class="tab-pane active" id="messages">
		     <div style=" width:600px; height:300px;" class="grid3"></div>	
		</div>
		<div class="tab-pane active" id="settings">
		    <div style=" width:600px; height:300px;" class="grid4"></div>	
		</div>
		<div class="tab-pane" id="settings2">
		    <div style=" width:600px; height:80px;"><div style="height:170px;">ad</div></div>	
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			$('#myTab a').click(function(e) {
				e.preventDefault();
				$(this).tab('show');
			});

			$('.table tr td:first-child a').click(function() {

				$(this).find('span').toggleClass('icon-minus');

			});
		})
	</script>	
	

<script type="text/javascript">
function getData(){
	var rows = [];
	for(var i=1; i<=1102; i++){
		var amount = Math.floor(Math.random()*1000);
		var price = Math.floor(Math.random()*1000);
		rows.push({
			inv: 'Inv No '+i,
			name: 'Name '+i,
			amount: amount,
			price: price,
			cost: amount*price,
			//a1cadf:'adfa',
//			a2cadf:'adfa',
//			ac3adf:'abc',
//			ac3adsxf:'abac',
//			ac3absgdf:'abbc',
//			acdadf:'adfa',
//			acadf:'adfa',
			note: 'Note '+i
		});
	}
	return rows;
}
var grid1 = $(".grid1").extgrid({pageSize:300,data:getData(),rowNumbersWidth:false,checkBox:false,showHeader:true,singleSelect:false,pagination:false,_lSize:0,denyRowEvents:false});
var grid2 = $(".grid2").extgrid({pageSize:300,data:getData(),rowNumbersWidth:false,checkBox:false,showHeader:true,singleSelect:false,pagination:false,_lSize:0,denyRowEvents:false});
var grid3 = $(".grid3").extgrid({pageSize:300,data:getData(),rowNumbersWidth:false,checkBox:false,showHeader:true,singleSelect:false,pagination:false,_lSize:0,denyRowEvents:false});
//var grid4 = $(".grid4").extgrid({pageSize:300,data:getData(),rowNumbersWidth:false,checkBox:false,showHeader:true,singleSelect:false,pagination:true,_lSize:0,denyRowEvents:false});

/*grid.bind("onCellEdit",function(t,rid,field,rowData){
	alert('我是修改后的值:'+rowData[field]);
});*/
</script>
</body>
</html>
